From fa3e2aeeb9894a133df5f79d97987c276c7f06a1 Mon Sep 17 00:00:00 2001 From: Factiven Date: Mon, 24 Apr 2023 23:43:05 +0700 Subject: Revamp UI 1 --- pages/anime/[...id].js | 381 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 269 insertions(+), 112 deletions(-) (limited to 'pages/anime/[...id].js') diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index cea025c..65e9568 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -1,6 +1,8 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import "react-loading-skeleton/dist/skeleton.css"; +import { HeartIcon } from "@heroicons/react/20/solid"; + import Head from "next/head"; import Image from "next/image"; import { useRouter } from "next/router"; @@ -64,9 +66,76 @@ const query = ` } `; +const infoQuery = `query ($id: Int) { + Media(id: $id) { + id + type + title { + romaji + english + native + } + coverImage { + extraLarge + large + color + } + bannerImage + description + episodes + nextAiringEpisode { + episode + airingAt + } + averageScore + popularity + status + startDate { + year + } + duration + genres + relations { + edges { + relationType + node { + id + type + status + title { + romaji + english + userPreferred + } + coverImage { + extraLarge + large + color + } + } + } + } + recommendations { + nodes { + mediaRecommendation { + id + title { + romaji + } + coverImage { + extraLarge + large + } + } + } + } + } +}`; + export default function Info() { const { data: session, status } = useSession(); const [data, setData] = useState(null); + const [info, setInfo] = useState(null); const [episode, setEpisode] = useState(null); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(null); @@ -79,11 +148,17 @@ export default function Info() { const [time, setTime] = useState(0); const { id } = useRouter().query; - // console.log(stall); + const rec = info?.recommendations?.nodes.map( + (data) => data.mediaRecommendation + ); + + // console.log(rec); + console.log(progress); useEffect(() => { const defaultState = { data: null, + info: null, episode: null, loading: true, statuses: null, @@ -113,11 +188,30 @@ export default function Info() { if (id) { setLoading(false); try { - const res = await fetch( - `https://api.moopa.my.id/meta/anilist/info/${id?.[0]}` - ); + // const res = await fetch( + // `https://api.moopa.my.id/meta/anilist/info/${id?.[0]}` + // ); + + const [res, info] = await Promise.all([ + fetch(`https://api.moopa.my.id/meta/anilist/info/${id?.[0]}`), + fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: infoQuery, + variables: { + id: id?.[0], + }, + }), + }), + ]); const data = await res.json(); - if (data.episodes.length === 0) { + const infos = await info.json(); + setInfo(infos.data.Media); + + if (!data || data.episodes.length === 0) { const res = await fetch( `https://api.consumet.org/meta/anilist/info/${id[0]}?provider=9anime` ); @@ -218,111 +312,168 @@ export default function Info() { return ( <> - {data?.title?.romaji || data?.title?.english} + + {info + ? info?.title?.romaji || info?.title?.english + : "Retrieving Data..."} +
-
+
- {data && ( + {info ? ( banner anime + ) : ( +
)}
-
-
+
+ {/* Mobile */} + +
+
+

+ {/* Yuru Campā–³ SEASON 2 */} + {info?.title?.romaji || info?.title?.english} +

+

+

+ {info?.genres + ?.slice( + 0, + info?.genres?.length > 3 ? info?.genres?.length : 3 + ) + .map((item, index) => ( + + + {item} + + {/* {index !== info?.genres?.length - 1 && ( + + )} */} + + ))} +
+ {info && ( +
+
+ {statuses ? statuses : "Add to List"} +
+
+ +
+
+ )} +
+
+
+ {/*
+ completed +
+
+ +
*/} +
+
+
+ + {/* PC */} +
- {loading ? ( - data && ( - <> -
- poster anime - - ) + {info ? ( + <> +
+ poster anime + ) : ( )}
-
+ + {/* PC */} +

- {loading ? ( - data?.title?.romaji || data?.title?.english + {info ? ( + info?.title?.romaji || info?.title?.english ) : ( )}

- {loading ? ( - data && ( -
-
-
- {data?.totalEpisodes} Episodes -
-
- {data?.releaseDate} -
-
- {data?.rating}% -
-
- {data?.type} -
-
- {data?.status} -
-
- Sub | EN -
- {data && data.nextAiringEpisode && ( -
- Ep {data.nextAiringEpisode.episode}: {time} -
- )} -
+ {info ? ( +
+
+ {info?.episodes} Episodes
- ) +
+ {info?.startDate?.year} +
+
+ {info?.averageScore}% +
+
+ {info?.type} +
+
+ {info?.status} +
+
+ Sub | EN +
+ {info && info.nextAiringEpisode && ( +
+ Ep {info.nextAiringEpisode.episode}: {time} +
+ )} +
) : ( )}
- {loading ? ( + {info ? (

) : ( @@ -333,12 +484,12 @@ export default function Info() {

- {data && ( + {info && (
Relations
)} - {data?.relations?.length > 3 && ( + {info?.relations?.edges?.length > 3 && (
setShowAll(!showAll)} @@ -350,43 +501,46 @@ export default function Info() {
- {loading - ? data?.relations && - data?.relations - .slice(0, showAll ? data?.relations.length : 3) - .map((relation, index) => { + {info?.relations?.edges + ? info?.relations?.edges + .slice(0, showAll ? info?.relations?.edges.length : 3) + .map((r, index) => { + const rel = r.node; return (
{relation.id}
- {relation.relationType} + {r.relationType}
- {relation.title.romaji} + {rel.title.userPreferred || + rel.title.romaji}
-
{relation.type}
+
{rel.type}
@@ -414,7 +569,7 @@ export default function Info() {
- {data && ( + {info && (

Episodes

@@ -445,7 +600,7 @@ export default function Info() { stall ? `9anime` : "" }`} className={`text-start text-sm md:text-lg ${ - episode.number <= progress + progress && episode.number <= progress ? "text-[#5f5f5f]" : "text-white" }`} @@ -454,7 +609,7 @@ export default function Info() { {episode.title && (

) ) : ( - <> +

+ Loading Episodes... +
)}
- {data && ( + {rec && (
)} -- cgit v1.2.3